<template>
  <view class="container">
    <view class="card-container">
      <consume-card :order-id="orderId" />
    </view>
    
    <view class="input-container">
      <input 
        v-model="code" 
        type="text" 
        placeholder="请输入核销码" 
        placeholder-class="placeholder"
        confirm-type="done"
      />
    </view>
    
    <button class="verify-btn" @click="verifyOrder">
      确认核销
    </button>
  </view>
</template>

<script>
import { hxcode } from "@/api/my.js"
export default {
  data() {
    return {
      orderId: '',
      Id:'',
      code: ''
    }
  },
  onLoad(option) {
    this.orderId = option.orderId
    this.Id=option.id
  },
  methods: {
    // 核销订单
    verifyOrder() {
      // 校验核销码
      if (!this.code.trim()) {
        uni.showToast({
          title: '请输入核销码',
          icon: 'none'
        })
        return
      }
      // 显示确认弹窗
      uni.showModal({
        title: '确认核销',
        content: '您确定要核销此订单吗？',
        confirmText: '确认',
        cancelText: '取消',
        confirmColor: '#FF9500',
        success: (res) => {
          if (res.confirm) {
            // 用户点击确认，调用核销接口
            this.handleVerification()
          }
        }
      })
    },
    
    // 处理核销请求
    handleVerification() {
      uni.showLoading({
        title: '核销中...',
        mask: true
      })
      hxcode({
        code: this.code,
        orderId:this.Id
      }).then((res) => {
        uni.hideLoading()
        if (res.code === 1) {
          // 核销成功
          uni.showToast({
            title: '核销成功',
            icon: 'success'
          })
          // 延迟后返回上一页或刷新页面
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          // 核销失败
          uni.showToast({
            title: res.message || '核销失败，请重试',
            icon: 'none'
          })
        }
      }).catch((err) => {
        uni.hideLoading()
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      })
    }
  }
}
</script>

<style>


.card-container {
  margin-bottom: 40rpx;
}

.input-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.input-container input {
  font-size: 30rpx;
  height: 60rpx;
  color: #333;
}

.placeholder {
  color: #999;
}

.verify-btn {
  background-color: #FF9500;
  color: #fff;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin: 0 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.3);
}
</style>